<template>
  <div id="coupon_v2_detail">
    <c-title :hide="false" text="优惠券详情"></c-title>
    <div class="coupon-detail">
      <coupon-info :dataInfo="info_arr" :image="datainfo.avatar" v-if="datainfo && datainfo.avatar">
        <template #shareBtn>
          <div class="coupon-btn" @click="goBuy(info_arr.coupon.applicable_scope)" v-if="use_coupon_BUY_BTN">
            立即使用
          </div>
        </template>
        <template #couponBtn>
          <div class="coupon-btnList flex flex-j-c" v-if="info_arr.status == 0">
            <div class="btn-item flex-a-c" v-if="info_arr && info_arr.can_transfer" @click="showPresenter_Tap">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-fenxiangyouhuiquan"></span></div>
              <p>转赠</p>
            </div>
            <div class="btn-item flex-a-c" v-if="info_arr && info_arr.is_write_off" @click="clickWriteOff">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-saoma"></span></div>
              <p>核销</p>
            </div>
          </div>
        </template>
        <template #desc>
          <div class="desc-content">
            <p v-if="$route.name != 'new_coupon_detail_combination'">有效期：{{ info_arr.validity_period }}</p>
            <p>券类型：{{ info_arr.coupon.coupon_type_name }}</p>
            <p>券张数：{{ info_arr.coupon_num || 1 }}张</p>
            <p v-if="info_arr.coupon && info_arr.coupon.applicable_oil">油品：{{ info_arr.coupon.applicable_oil }}</p>
            <p v-if="info_arr.car">指定车牌号使用:{{ info_arr.car.license_no }}</p>
            <div class="rule-box">
              <span class="rule-p">使用规则：</span>
              <div class="rule-content" v-if="info_arr && info_arr.coupon" v-html="info_arr.coupon.coupon_rule"></div>
            </div>
          </div>
        </template>
      </coupon-info>
      <!-- 组合券 -->
      <div class="combinationBox" v-if="show_combinationBox">
        <div class="combinationBox_left">组合券</div>
        <div class="combinationBox_right" @click="combination_to(info_arr.id)">去组合</div>
      </div>
      <!--适用商品和门店-->
      <div class="apply-shop" v-if="show_is_applicable_store">
        <van-tabs v-model="active" @change="initList" :sticky="true" offset-top="40" line-width="15px" title-inactive-color="#00001C" :color="'var(--themeBaseColor)' || '#F15353'">
          <!-- <van-tab title="适用商品" v-if="storeCoupon.condition_type == 2">
            <div class="shopGoods-list flex flex-j-sb">
              <shop-goods v-for="(item, index) in goods_list" :key="index" @click.native="toGoodsStore(item.id)" :goodsItem="item" width="100%" height="172.5px"> </shop-goods>
            </div>
          </van-tab> -->
          <!--是门店或者平台商品和门店类型的优惠券才显示-->
          <!--指定门店 condition_type等于1时没有商品数据 || 门店独立后台发布的优惠券-->
          <van-tab title="适用门店">
            <div class="shop-list">
              <div class="title" v-if="store_list.length > 0">{{ storeCoupon.total }}个门店适用:</div>
              <div class="title" v-if="store_list.length <= 0">暂无门店适用</div>
              <block v-for="(item, index) in store_list" :key="index">
                <div class="shop-item flex-a-c" @click="toStore(item.id)">
                  <div class="left flex">
                    <van-image round width="52" height="52" :src="item.thumb" />
                  </div>
                  <div class="wrap flex">
                    <h3 class="pl">{{ item.store_name }}</h3>
                    <p>{{ item.address }}</p>
                  </div>
                  <div class="right flex-a-c">
                    <span>{{ item.distance }}{{ item.unit }}</span>
                    <i class="iconfont icon-daohang"></i>
                  </div>
                </div>
              </block>
            </div>
          </van-tab>
        </van-tabs>
        <!-- <div v-if="storeCoupon.page < storeCoupon.total_page" class="moreTxt flex-a-c flex-j-c" @click="tapMoreBtn">查看更多<span class="iconfont icon-course_goon"></span></div> -->
      </div>
      <div class="mb50"></div>
    </div>
    <!-- 转赠 -->
    <van-dialog
      v-model="showPresenter"
      title="请输入用户ID"
      round
      width="75%"
      show-confirm-button
      show-cancel-button
      confirm-button-color="var(--themeBaseColor)"
      @confirm="cancelRecharge"
      before-close
    >
      <template #title><span style="font-weight: bold;font-size: 1rem;">转赠</span></template>
      <div class="share-main user-main">
        <div class="TransferSelect">
          <van-radio-group v-model="transferRadio" direction="horizontal" @change="transferChange">
            <van-radio name="1" checked-color="#FE5E56">会员ID</van-radio>
            <van-radio name="2" checked-color="#FE5E56">手机号</van-radio>
            <van-radio name="3" checked-color="#FE5E56">分享</van-radio>
          </van-radio-group>
        </div>
        <div>
          <input type="number" @keyup="throttleFn" v-focus :placeholder="checkInput_transfer" v-model="recharge_search" v-if="transferRadio == '1'" />
          <input type="number" v-focus :placeholder="checkInput_transfer" v-model="recharge_search" v-if="transferRadio == '2'" />
          <div class="user-hint" v-show="nickname && recharge_search && transferRadio == '1'">
            <template v-if="nickname != '查无此用户'">昵称：</template>
            {{ nickname }}
          </div>
        </div>
        <div>
          <div class="flex-a-c flex-j-sb" v-if="info_arr">
            <h3>转赠张数</h3>
            <van-stepper v-model="couponNum" theme="round" min="1" :max="info_arr.coupon_num" button-size="24" @change="changeRechargeNum" />
          </div>
          <div class="user-num" v-if="info_arr">拥有数量{{ info_arr.coupon_num }}</div>
        </div>
      </div>
    </van-dialog>
    <!-- 显示核销码 -->
    <div class="verification">
      <van-popup v-model="verification" round :style="{ height: '60%', width: '70%' }" @close="close_verification">
        <div class="verification-mian">
          <h3>优惠券核销</h3>
          <div class="ver-img">
            <img :src="verificationImg" alt />
          </div>
          <p>出示二维码 核销优惠券</p>
        </div>
        <div class="close" @click.stop="close_verification">
          <i class="iconfont icon-adsystem_icon_cancle"></i>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import couponInfo from "./components/couponInfo.vue";
import { Image as VanImage } from "vant";
import { debounce } from "lodash";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      datainfo: {},
      info_arr: null,
      active: "",
      store_list: [],
      storeCoupon: {
        page: 1,
        total_page: 0,
        total: 0
      },
      // 转赠开关
      showPresenter: false,
      recharge_search: "",
      nickname: "",
      transferRadio: "1",
      couponNum: 1,
      // 核销
      verification: false,
      verificationImg: "",
      isLoadMore: true
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    combination_to(id) {
      this.$router.push(this.fun.getUrl("new_CouponCombination", { id: id }));
    },
    async clickWriteOff() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.write-off-code", { id: this.$route.params.id }, "");
      if (result) {
        this.verificationImg = data.qr_code;
        this.verification = true;
      } else {
        this.$toast(msg);
      }
    },
    close_verification() {
      this.verification = false;
    },
    changeRechargeNum(num) {
      if (this.couponNum >= this.info_arr.coupon_num) {
        this.couponNum = this.info_arr.coupon_num;
        this.$toast(`分享张数不足,当前可转赠数量为${num}张`);
      }
    },
    async cancelRecharge() {
      let json = {
        id: this.$route.params.id,
        transfer_type: this.transferRadio,
        num: this.couponNum
      };
      if (this.transferRadio == 1) {
        if (this.fun.isTextEmpty(this.recharge_search)) {
          this.$toast("请输入会员ID");
          return;
        }
        json.member_id = this.recharge_search;
      }
      if (this.transferRadio == 2) {
        if (this.fun.isTextEmpty(this.recharge_search)) {
          this.$toast("请输入转赠手机号");
          return;
        }
        json.mobile = this.recharge_search;
      }
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.member-coupon.transfer-coupon", json, "");
      if (result) {
        this.showPresenter = false;
        if (this.transferRadio == 3) {
          this.$router.push(this.fun.getUrl("new_CouponShareShow", { mark_id: data.mark_id }));
          return;
        }
        this.$toast(msg);
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    throttleFn: debounce(function(event) {
      this.searchTransfer(event);
    }, 300),
    searchTransfer(event) {
      this.nickname = null;
      var reSearch = event.target.value;
      if (reSearch) {
        $http
          .get("member.member.memberInfo", { uid: reSearch }, ".")
          .then(response => {
            if (response.result === 1) {
              this.nickname = response.data ? response.data.nickname : "查无此用户";
            } else {
              this.nickname = null;
              this.$toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        this.showSearch = false;
        this.search_list = [];
      }
    },
    transferChange() {
      console.log(this.transferRadio);
      this.recharge_search = "";
      this.nickname = "";
    },
    showPresenter_Tap() {
      this.showPresenter = true;
    },
    goBuy(item) {
      this.couponMapFun(item);
    },
    couponMapFun(item) {
      const couponMap = [
        [
          () => item.scope_type == 1,
          () => {
            this.goHome();
          }
        ],
        [
          () => item.scope_type == 2,
          () => {
            this.$router.push(
              this.fun.getUrl("catelist", {
                id: JSON.stringify(item.data),
                fromHome: 1
              })
            );
          }
        ],
        [
          () => item.scope_type == 3,
          () => {
            this.$router.push(
              this.fun.getUrl("search", {
                new_coupon_id: JSON.stringify(this.info_arr.coupon.id),
                fromHome: 1
              })
            );
          }
        ]
      ];
      const targetFn = couponMap.find(couItem => couItem[0]());
      if (targetFn && targetFn[0] && targetFn[0]()) {
        targetFn[1]();
      } else {
        this.goHome();
      }
    },
    goHome() {
      this.$router.push(this.fun.getUrl("home"));
    },
    toStore(id) {
      this.$router.push(
        this.fun.getUrl("o2oStore_v2", {
          store_id: id,
          fromHome: 1
        })
      );
    },
    async getData() {
      let urlstr = "plugin.new-coupon.frontend.controllers.member-coupon.get-detail";
      console.log(this.$route.name);
      if (this.$route.name == "new_coupon_detail_combination") {
        urlstr = "plugin.new-coupon.frontend.controllers.coupon.detail";
      }
      let { data, msg, result } = await $http.post(urlstr, { id: this.$route.params.id }, "");
      if (result) {
        this.datainfo = data;
        this.info_arr = data.info;
        console.log(this.show_is_applicable_store, "wwwwewewe");
        if (this.show_is_applicable_store) {
          this.getStore();
        }
      } else {
        this.$toast(msg);
      }
    },
    async getStore() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.coupon.get-applicable-store", { id: this.info_arr.coupon.id }, "");
      if (result) {
        console.log(data.list.data);
        this.store_list = data.list.data;
        this.storeCoupon.total_page = data.list.last_page;
        this.storeCoupon.total = data.list.total;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.storeCoupon.page >= this.storeCoupon.total_page) {
        return;
      } else {
        this.storeCoupon.page += 1;
        let json = {
          page: this.storeCoupon.page,
          id: this.info_arr.coupon.id
        };
        let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.coupon.get-applicable-store", json, "");
        if (result) {
          this.store_list = this.store_list.concat(data.list.data);
        } else {
          this.$toast(msg);
          this.storeCoupon.page = this.storeCoupon.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  },
  computed: {
    checkInput_transfer() {
      if (this.transferRadio == "1") {
        return "请输入赠送的用户ID";
      } else if (this.transferRadio == "2") {
        return "请输入会员手机号";
      } else {
        return;
      }
    },
    show_is_applicable_store() {
      if (!this.info_arr) return false;
      if (this.info_arr.coupon.is_applicable_store) {
        return this.info_arr.coupon.is_applicable_store;
      } else {
        return false;
      }
    },
    show_combinationBox() {
      if (!this.info_arr) return false;
      if (this.info_arr.status != 0) return false;
      return this.info_arr.coupon.show_combination;
    },
    use_coupon_BUY_BTN() {
      if (!this.info_arr) return false;
      if (this.info_arr.coupon && this.info_arr.coupon.coupon_type == 6) {
        let scope_type = this.info_arr.coupon.applicable_scope.scope_type;
        if (scope_type == 1 || scope_type == 2 || scope_type == 3) {
          return true;
        } else {
          return false;
        }
      }
    }
  },
  components: { couponInfo, VanImage }
};
</script>
<style lang="scss" scoped>
.desc-content ::v-deep .rule-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.desc-content ::v-deep .content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.coupon-detail {
  height: auto;
  min-height: 100vh;
  background: linear-gradient(178deg, var(--themeBaseColor) 0%, var(--themeBaseColor) 3.125rem, #f5f5f5 12.5rem, #f5f5f5 100%);
  padding: 3rem 0 0 0;
  box-sizing: border-box;
  .coupon-info {
    margin: 0 0.9375rem;
    box-sizing: border-box;
    width: calc(100% - 1.875rem);
    .coupon-btn {
      margin: 0rem 0 1.625rem 0;
      width: 14.1875rem;
      background: var(--themeBaseColor);
      border-radius: 1.25rem;
      font-weight: 500;
      color: #ffffff;
      font-size: 0.9375rem;
      line-height: 0.9375rem;
      padding: 0.75rem 0;
    }
    .coupon-btnList {
      padding: 0rem 0.625rem 1.375rem 0.625rem;

      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
      .btn-item {
        // margin:0 1.625rem 0 0;
        flex-direction: column;
        flex: 25% 0 0;
        .btn-circle {
          width: 3.25rem;
          height: 3.25rem;
          border-radius: 50%;
          background-color: #f5f5f5;
          margin: 0 0 0.4375rem 0;
          .iconfont {
            color: #3b3b4a;
            font-size: 1.25rem;
          }
        }
        p {
          font-size: 0.75rem;
          color: #3b3b4a;
        }
        .title {
          color: #3b3b4a;
          font-size: 1.5rem;
        }
      }
    }
    .code-desc {
      position: relative;
      .desc-circle {
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
      }
      .desc-circle2 {
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: #f5f5f5;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -50%);
      }
      .desc-content {
        border-top: 0.0625rem dashed #d6d6dc;
        padding: 1.25rem 0 0.9375rem 0;
        margin: 0 0.75rem;
        color: #6e6e79;
        line-height: 1.125rem;
        font-size: 0.75rem;
        text-align: left;
        // .rule-p {
        //   min-width: 18%;
        // }
      }
    }
  }
}
// 组合券
.combinationBox {
  overflow: hidden;
  margin: 0.63rem 0.94rem;
  padding: 1rem 0.75rem;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  .combinationBox_left {
    font-weight: bold;
    font-size: 0.88rem;
  }
  .combinationBox_right {
    font-weight: 500;
    font-size: 0.81rem;
    width: 3.94rem;
    height: 1.75rem;
    background: #f15353;
    border-radius: 0.94rem;
    line-height: 1.75rem;
    color: #ffffff;
  }
}
// 门店列表
.apply-shop ::v-deep .van-tabs__nav {
  background-color: #f5f5f5;
}
.apply-shop ::v-deep .van-tabs__line {
  bottom: 1.25rem;
}
.apply-shop ::v-deep .van-tab--active {
  font-weight: bold;
  color: #00001c;
  font-size: 1rem;
}
.apply-shop {
  padding-bottom: 3rem;
  .shop-list {
    margin: 0 0.9375rem;
    .shop-type {
      text-align: left;
    }
    .title {
      text-align: left;
    }
    .shop-item {
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 0.75rem;
      padding: 0.75rem;
      margin: 0.625rem 0 0 0;
      .left {
        padding: 0 0.5rem 0 0;
        // flex:1;
      }
      .wrap {
        // flex:2;
        width: 70%;
        text-align: left;
        flex-direction: column;
        h3 {
          font-weight: bold;
          color: #00001c;
          font-size: 0.875rem;
        }
        p {
          color: #6e6e79;
          font-size: 0.75rem;
        }
      }
      .right {
        min-width: 28%;
        justify-content: flex-end;
        span {
          color: #6e6e79;
          font-size: 0.8125rem;
          padding: 0 5px 0 0;
        }
        .iconfont {
          font-size: 1.75rem;
          color: var(--themeBaseColor);
        }
      }
    }
  }

  .shopGoods-list {
    margin: 0.25rem 0.9375rem 0 0.9375rem;
    width: calc(100% - 1.875rem);
    box-sizing: border-box;
    flex-wrap: wrap;
  }
}
// 转赠
.TransferSelect {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.share-main ::v-deep .van-stepper {
  padding: 1.3125rem 0 1rem 0;
}
.share-main ::v-deep .van-stepper--round .van-stepper__minus {
  color: var(--themeBaseColor);
  border: 0.0625rem solid var(--themeBaseColor);
}
.share-main ::v-deep .van-stepper--round .van-stepper__minus::before {
  background-color: var(--themeBaseColor);
}
.share-main ::v-deep .van-stepper--round .van-stepper__plus {
  background-color: var(--themeBaseColor);
}
.user-main {
  margin: 0 0.75rem;
  .user-hint {
    color: var(--themeBaseColor);
    font-size: 0.75rem;
    text-align: left;
    padding: 0.3125rem 0;
  }
  .user-num {
    color: var(--themeBaseColor);
    font-size: 0.75rem;
    text-align: left;
    padding: 0 0 0.9375rem 0;
  }
}
.user-main input {
  width: 100%;
  border: 0.0625rem solid #d6d6dc;
  border-radius: 0.5rem;
  outline: none;
  margin: 0.875rem 0 0rem 0;
  padding: 0.6875rem 0;
  text-align: center;
}
.user-main ::-webkit-input-placeholder {
  font-size: 0.8125rem;
  color: #aaaab3;
  text-align: center;
}
// 核销
.verification ::v-deep .van-popup {
  background: transparent;
}
.verification-mian {
  width: 100%;
  // height: 100%;
  border-radius: 0.9375rem;
  background-color: #fff;
  position: relative;
  h3 {
    font-weight: bold;
    color: #00001c;
    font-size: 1.125rem;
    line-height: 1.125rem;
    text-align: center;
    padding: 1.4063rem 0 1rem 0;
  }
  .ver-img {
    padding: 0 2.5625rem;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  p {
    padding: 0.625rem 0 1.75rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: #aaaab3;
  }
}
.close {
  position: absolute;
  bottom: 3.875rem;
  left: 50%;
  transform: translateX(-50%);
  .iconfont {
    font-size: 2.5rem;
    color: #d6d6dc;
  }
}
</style>
